<template>
  <view class="order_wrap">
    <z-paging ref="paging" v-model="orderList" @query="queryList" >
      <template #top>
        <z-nav-bar id="nav" bgColor="#ffffff" backState="2000">
          <view slot="right" class="search_wrap">
            <up-search placeholder="请输入订单" v-model="keyword" :showAction="false" @change="handleKeyword"></up-search>
          </view>
        </z-nav-bar>
        <view class="title-btn-receptacle flex">
          <view v-for="(item,index) in titleList" :key="index" class="item" :class="titleIndex==index?'active':''" @tap="titleClick(index)">
            {{item}}
            <view v-if="titleIndex==index" class="black-line-vessel flex-j-center animated fadeIn faster">
              <view class="black-line"></view>
            </view>
          </view>
        </view>
      </template>
      <view class="order_list mgt-32">
        <template v-for="(item,index) in orderList" :key="item.id">
          <order-item :orderInfo="item"
                      @handlePost="handlePost"
                      @handleSignFor="handleSignFor($event,index)"
                      @handleCancelOrder="handleCancelOrder($event,index)"
          ></order-item>
        </template>

      </view>
    </z-paging>

<!--     生成一个弹窗-->
<!--    <up-modal-->
<!--      :show="showSing"-->
<!--      :showCancelButton="true"-->
<!--      title="提示"-->
<!--      :closeOnClickOverlay="true"-->
<!--      @confirm="confirmSign"-->
<!--      @cancel="close"-->
<!--      @close="close"-->
<!--      content=''>-->
<!--      <view class="slot-content">-->
<!--        申请人不是当前申请门店的会员，请先成为会员后再进行团体卡！-->
<!--      </view>-->
<!--    </up-modal>-->
  </view>
</template>

<script setup>
import {ref,onMounted} from "vue";
import {customerQryUserOrder} from '@/api/home'
import {customerConfirmReceipt, customerPriceConfirm,customerCancelOrder} from '../../api/pagesMy/user'
import {setPlay} from '../../utils/common'
const orderList =ref([])
const paging = ref(null)
const keyword = ref('')
const showSing = ref(false)
let prams={}
const queryList = (pageNo, pageSize) => {
  // 此处请求仅为演示，请替换为自己项目中的请求
  customerQryUserOrder({
    pageNum:  pageNo,
    pageSize: pageSize,
    ...prams
  }).then(res=>{
    paging.value.complete(res)
  })
}
let titleIndex = ref(0)
let titleList = ref(["全部订单","待支付","待完成","已完成","售后"])
//标题点击
function titleClick(index){
  titleIndex.value = index
  console.log(index)
  switch (index){
    case 0:
      prams ={}
      break;
    case 1:
      prams.orderStatus = 10

      break;
    case  2:
      prams.orderStatus = 20

      break;
    case 3:
      prams.orderStatus = 30
      break
    case 4:
      prams.orderStatus = 40
      break
  }
  paging.value.reload()
}
function handleKeyword(e){
  console.log(e)
  prams.orderId = e
  paging.value.reload()
}
function handlePost(item){
  customerPriceConfirm({
    orderId:item.orderId,
    action:"PRICE_CONFIRM",
    price:item.supplementAmount,
    tradeType:"PRICE_CONFIRM"
  }).then(res=>{
    setPlay(res,()=>{
        uni.showToast({
          title: '支付成功',
          icon: 'success',
          duration: 2000
        })
      item.supplementStatus =''
    })
  })

}
function handleSignFor(item,index){
  uni.showModal({
    title: '提示',
    content: '点击确认完成衣物签收！',
    success (res) {
      if (res.confirm) {
        customerConfirmReceipt({
          orderId:item.orderId,
          action:"CONFIRM_RECEIPT"
        }).then(res=>{
          uni.showToast({
            title: '确认收货成功',
            icon: 'success',
            duration: 2000
          })
          orderList.value.splice(index,1)
        })
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
  })

  // console.log(item,index)
}
function handleCancelOrder(orderId,index){
  uni.showModal({
    title: '提示',
    content: '是否确认取消订单？',
    success (res) {
      if (res.confirm) {
        customerCancelOrder({
          orderId:orderId,
        }).then(res=>{
          uni.showToast({
            title: '取消订单成功',
            icon: 'success',
            duration: 2000
          })
             orderList.value.splice(index,1)
          // paging.value.reload()
        })
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
  })
}
</script>

<style lang="scss">
.order_wrap{
  width: 100%;
  min-height: 100vh;
  background-color: #f6f6f6;
  .search_wrap{
    width: 520rpx;
    margin-right: 10rpx;
  }
  .order_list{
    width: 100%;
    padding: 0 24rpx;
    margin-bottom: 150rpx;
  }

}

</style>
